<template>
  <!-- 顶部标题栏 -->
  <view class="bg-[#165DFF] text-white text-center text-[36rpx] font-bold py-[32rpx]">我的课程</view>
  <!-- tab栏 -->
  <view class="flex w-full bg-[#165DFF]">
    <view
      v-for="(tab, idx) in tabs"
      :key="tab"
      class="flex-1 text-center py-[24rpx] text-[30rpx] cursor-pointer transition-all"
      :class="[
        activeTab === idx
          ? 'text-white font-bold border-b-[6rpx] border-[#fff]'
          : 'text-white/70 font-normal border-b-[6rpx] border-transparent'
      ]"
      @click="activeTab = idx"
    >
      {{ tab }}
    </view>
  </view>
  <!-- 内容区 -->
  <view class="p-[30rpx] min-h-[60vh]">
    <!-- 购买的课程列表 -->
    <view v-show="activeTab === 0">
      <template v-if="purchasedCourses.length">
        <view
          v-for="item in purchasedCourses"
          :key="item.id"
          class="bg-white rounded-2xl shadow-md p-[30rpx] mb-[24rpx] flex flex-col gap-y-2"
          @tap="goDetail(item)"
        >
          <view class="course-name text-[32rpx] font-bold mb-[12rpx] line-clamp-1">{{ item.name }}</view>
          <view class="course-duration text-[#666] text-[26rpx] mb-[8rpx]">时长: {{ item.duration }}</view>
          <view class="course-price text-[#165DFF] text-[32rpx] font-bold">¥{{ item.price }}</view>
        </view>
      </template>
      <view v-else class="text-center py-[100rpx] text-[#999] text-[28rpx]">暂无购买课程</view>
    </view>
    <!-- 发布的课程列表 -->
    <view v-show="activeTab === 1">
      <template v-if="publishedCourses.length">
        <view
          v-for="item in publishedCourses"
          :key="item.id"
          @tap="goRecorder(item)"
          class="bg-white rounded-2xl shadow-md p-[30rpx] mb-[24rpx] flex flex-col gap-y-2"
        >
          <view class="course-name text-[32rpx] font-bold mb-[12rpx] line-clamp-1">{{ item.name }}</view>
          <view class="course-duration text-[#666] text-[26rpx] mb-[8rpx]">时长: {{ item.duration }}</view>
          <view class="course-price text-[#165DFF] text-[32rpx] font-bold">¥{{ item.price }}</view>
        </view>
      </template>
      <view v-else class="text-center py-[100rpx] text-[#999] text-[28rpx]">暂无发布课程</view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Taro from '@tarojs/taro'
import { ref } from 'vue'

/**
 * 我的课程页面
 * @description 课程tab切换、列表展示，严格按设计稿和Cursor规则实现。
 * @performance 只渲染当前tab内容，列表用v-for+mock数据，移动端适配。
 */

const tabs = ['我购买的', '我发布的']
const activeTab = ref(0)

// mock数据
const purchasedCourses = ref([
  { id: 1, name: 'JavaScript高级程序设计', duration: '36小时', price: '199.00' },
  { id: 2, name: 'Vue.js从入门到实战', duration: '24小时', price: '129.00' },
  { id: 3, name: 'React Native跨平台开发', duration: '30小时', price: '159.00' }
])
const publishedCourses = ref([
  { id: 1, name: 'HTML5与CSS3基础教程', duration: '20小时', price: '99.00' },
  { id: 2, name: 'Node.js后端开发', duration: '28小时', price: '149.00' }
])

const goDetail = (item: any) => {
  Taro.navigateTo({ url: `/pages/webs/training?id=${item.id}` })
}

const goRecorder = (item: any) => {
  Taro.navigateTo({ url: `/pages/course/recorder?id=${item.id}` })
}
</script>

<style scoped lang="scss">

</style>